<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>v-text_指令</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!--
        我们学过的指令:
            v-bind   单向绑定解析表达式，可简写为：xxx
            v-model  双向数据绑定
            v-for    遍历数组/对象/字符串
            v-on     绑定事件监听，可简写为@
            V-if     条件渲染（动态控制节点是否存存在）
            v-else   条件渲染（动态控制节点是否存存在）
            v-show   条件渲染(动态控制节点是否展示)
    -->

    <div id="root">
      <h3>
        {{name}}
        <i>吃饭</i>
      </h3>
      <h3 v-text="name"></h3>
      <h3 v-text="str"></h3>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false;

    new Vue({
      el: "#root",
      data: {
        name: "张三",
        str: "<i>吃饭</i>",
      },
    });
  </script>
</html>
